<script setup lang="ts">
import { getMemberAddressAPI } from '@/services/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 子调父(实现关闭弹出层)
const emit = defineEmits<{
    (event: 'close'): void
}>()

// 存储收货地址列表数据
const addressList = ref<AddressItem[]>([])
// 获取收货地址列表数据(并存储数据)
const getMemberAddressByIdData = async () => {
    const res = await getMemberAddressAPI()
    addressList.value = res.result
}

// 组件加载时调用(使用onLoad只是初始调用, 新建地址后需返回此页, 则使用onShow每次加载时调用)
onShow(() => {
    getMemberAddressByIdData()
})
</script>

<template>
    <view class="address-panel">
        <!-- 关闭按钮 -->
        <text class="close icon-close" @tap="emit('close')"></text>
        <!-- 标题 -->
        <view class="title">配送至</view>
        <!-- 内容 -->
        <view class="content">
            <view class="item" v-for="item in addressList" :key="item.id">
                <view class="user">{{ item.receiver }} {{ item.contact }}</view>
                <view class="address">{{ item.fullLocation }}</view>
                <text class="icon icon-checked" v-if="item.isDefault === 1"></text>
            </view>
        </view>
        <view class="footer">
            <view class="button primary">
                <navigator hover-class="none" url="/pagesMember/address-form/address-form">
                    新建地址
                </navigator>
            </view>
            <view v-if="false" class="button primary">确定</view>
        </view>
    </view>
</template>

<style lang="scss">
/* H5端默认开启scoped样式隔离, 导致组件基础样式无效 */
@import './styles/AddressPanel.scss';
</style>